<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title></title>
    <script src="app.js"></script>
</head>
<body>
<h5>Mock</h5>
<table>
    <tr>
        <td>
            <button onclick="getData('get', 'http://server1.com/api/_func?id=11223')">mock: get</button>
        </td>
        <td>HTTP GET</td>
    </tr>
    <tr>
        <td>
            <button onclick="getData('post', 'http://server2.com/api/_json?id=11223', {type:'test'})">mock: post,
                delay
            </button>
        </td>
        <td>HTTP POST with delayed</td>
    </tr>
    <tr>
        <td>
            <button onclick="getData('post', 'http://server1.com/api/delete/' + (+new Date()))">mock: delete, pattern
                url
            </button>
        </td>
        <td>HTTP DELETE with pattern url: '/api/delete/:id'</td>
    </tr>
</table>


<hr/>
<h5>Real ajax</h5>
<table>
    <tr>
        <td>
            <button onclick="getData('post', 'https://api.weixin.qq.com/tcb/invokecloudfunction?access_token=ACCESS_TOKEN&env=ENV&name=FUNCTION_NAME')">
                proxy to baidu search
            </button>
        </td>
        <td>Proxy to https://www.baidu.com</td>
    </tr>
    <tr>
        <td>
            <button onclick="getData('get', 'https://api.github.com/users/hzsrc/starred')">proxy to github</button>
        </td>
        <td>Proxy to https://api.github.com</td>
    </tr>
</table>
<hr/>
<a id="url"></a>
<textarea id="ret" rows="26" style="width: 100%"></textarea>
<script>
function getData(method, url, data, type) {
    var a = document.getElementById('url')
    var pathname = url.replace(/https?:\/\/[^/]+\//, '/')
    a.href = location.origin + pathname
    a.innerText = method.toUpperCase() + ': ' + location.origin + pathname
    var ret = document.getElementById('ret')
    ret.value = 'loading...'
    if (data) {
        data = JSON.stringify(data)
    }
    return ajax(method, url, data).then(function (json) {
        ret.value = typeof json === 'string' ? json : JSON.stringify(json, null, 4)
    }).catch(function (t) {
        ret.value = t
    })
}

function ajax(method, url, data) {
    return new Promise(function (resolve, reject) {
        var request = new XMLHttpRequest();
        request.onreadystatechange = function () {
            if (request.readyState === 4) {
                if (request.status === 200) {
                    var contentType = request.getResponseHeader('content-type')
                    var tx = request.responseText
                    //if (contentType.indexOf('/json') > -1) {
                    //    resolve(JSON.parse(tx))
                    //} else{
                    resolve(tx)
                    //}
                } else {
                    reject(new Error('Error with status: ' + request.status));
                }
            }
        }
        request.onerror = reject

        request.open(method, url);
        request.send(data);
    })
}
</script>
</body>
</html>
